<template>
    <div class="header-wrapper">
        <div class="header">
            <span @click="back" class="back">
                ＜返回
            </span>
            <span class="common">
                <slot></slot>
            </span>
            <span class="userDetial" @click="toUsersSongLists">
             <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-caidan" />
          </svg>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        methods:{
            back(){
                this.$router.go(-1)
            },
            toUsersSongLists(){
                this.$router.push('usersSongLists')
            }
        }
    }
</script>

<style scoped lang="stylus">
.icon {
  width: 30px;
  height: 30px;
  vertical-align: -10px;
  fill: currentColor;
  overflow: hidden;
}
.header-wrapper
        position fixed
        width 100%
        top 0
        left 0
        .header
            height 50px
            line-height 50px
            display flex
            justify-content space-between
            width 100%
            .back
                font-size 20px
                font-weight 700
                color #ffffff
                padding-left 10px
            .common
                font-size 20px
                font-weight 700
                color gold
                display inline-block
                margin 0 auto
            .userDetial
                width 50px
</style>